<template>
  <div class="app-container" ref="scrollRef">
    <el-form
      class="p_form"
      label-position="top"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="90px"
      style="padding-left: 50px;padding-right: 50px;">
      <el-row style="margin-top: 20px;">
        <el-col :span="8">
          <el-form-item label-width="70px" label="Position Title" prop="title">
            <el-input v-model="form.title" placeholder="" style="width: 350px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="70px" label="Salary" prop="salary">
            <el-input v-model="form.salary" placeholder="" style="width: 350px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-left: 20px;">
          <el-form-item label="Salary Cap" prop="salaryupper">
            <el-input v-model="form.salaryupper" placeholder="" style="width: 350px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="70px" label="Report To" prop="reportTo">
            <el-input v-model="form.reportTo" placeholder="" style="width: 350px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-left: 20px;">
          <el-form-item label="Education" prop="education">
            <el-input v-model="form.education" placeholder="" style="width: 350px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--<el-form-item label-width="70px" label="Assigned staff" prop="assignedStaff">-->
            <!--<el-input v-model="form.assignedStaff" placeholder="" />-->
          <!--</el-form-item>-->
          <el-form-item label-width="120px" label="Assigned Staff">
            <el-select
              clearable
              filterable
              remote
              :remote-method="filterVmModel"
              v-selectLoadmore="loadMore"
              v-model="form.assignedUserId"
              :loading="loadingStaff"
              placeholder="Assign Staff">
              <el-option
                v-for="item in userOptions"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <p style="color: #000;font-weight: bold;margin-top: 50px;">Job Duties</p>
        <el-col :span="24" style="margin-top: 10px;">
          <el-form-item label-width="0" label="">
            <editor v-model="form.jobDuties" :min-height="392"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <p style="color: #000;font-weight: bold;margin-top: 50px;">Jobs Requirment</p>
        <el-col :span="24" style="margin-top: 10px;">
          <el-form-item label-width="0" label="">
            <editor v-model="form.specialReq" :min-height="392"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex;width: 100%;">
      <el-button type="primary" @click="submitForm" style="margin-left: 50px;">Confirm</el-button>
      <el-button @click="cancel" style="margin-left: 10px;">Cancel</el-button>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { listPosition, getPosition, delPosition, addPosition, updatePosition } from "@/api/system/position";
  import { listUser2 } from "@/api/system/user";

export default {
  name: "PositionAdd",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  data() {
    return {
      candidateList: [],
      ruleJobs: {
        com: [
          { required: true, message: "company null", trigger: "blur" }
        ],
        title: [
          { required: true, message: "title null", trigger: "blur" }
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        clientId: null,
        title: null,
        salary: null,
        salaryupper: null,
        reportTo: null,
        education: null,
        jobDuties: null,
        specialReq: null
      },
      // 表单参数
      form: {
        id: null,
        clientId: null,
        title: null,
        salary: null,
        salaryupper: null,
        reportTo: null,
        education: null,
        jobDuties: null,
        specialReq: null,
        assignedUserId: null
      },
      loadingStaff: false,
      userOptions: [],
      userList: [],
      userTotal: 0,
      // 日期范围
      dateRange: [],
      queryParamsUser: {
        pageNum: 1,
        pageSize: 1000,
        userName: null
      },
      // 表单校验
      rules: {
        email1: [
          { required: true, message: "email is null", trigger: "blur" }
        ],
        name: [
          { required: true, message: "name is null", trigger: "blur" }
        ],
        phone1: [
          { required: true, message: "phone is null", trigger: "blur" }
        ],
      }
    };
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  // 给Vue的实例注入数据，进行数据监听
  created() {
    this.form.clientId = this.$route.query.clientId;
    this.form.id = this.$route.query.id;
    console.log("=========================" + this.form.clientId)
    console.log("==================QQ=======" + this.form.id)
    this.initData();
  },
  methods: {
    loadMore(firstTag) {
      this.queryParamsUser.pageNum++;
      this.getUserList();
    },
    filterVmModel (value) {
      this.loadingStaff = true;
      console.log("=======================" + value)
      this.queryParamsUser.userName = value;
      this.queryParamsUser.pageNum = 1;
      this.getUserList();
    },
    getUserList() {
      //获取用户Staff
      listUser2(this.addDateRange(this.queryParamsUser, this.dateRange)).then(response => {
          this.userList = response.rows;
          if (this.queryParamsUser.pageNum == 1) {
            this.userOptions = [];
            this.userOptions.push(...this.userList);
          } else {
            this.userOptions.push(...this.userList);
          }
          this.userTotal = response.total;
        }
      ).finally(f => {
        this.loadingStaff = false;
      });
    },
    async initData() {
      await this.getUserList();
      this.form.assignedUserId = parseInt(this.id)
      console.log("======wer===========" + this.form.assignedUserId)
      if (this.form.id == null || this.form.id == '' || this.form.id  == undefined) {
        this.$nextTick(() => {
          this.scrollToTop();
        })
      } else {
        this.queryParams.id = this.form.id;
        this.getList();
      }
    },
    scrollToTop() {
      this.$refs.scrollRef.scrollTop= 0;
    },
    getList() {
      this.$modal.loading("请稍后...");
      listPosition(this.queryParams).then(response => {
        this.candidateList = response.rows;
        if (this.candidateList != null) {
          this.form = this.candidateList[0];
          if (this.form.assignedUserId != null &&
            this.form.assignedUserId != "" &&
            this.form.assignedUserId != undefined) {
            this.form.assignedUserId = parseInt(this.form.assignedUserId);
          }
        }
        this.$modal.closeLoading();
      }).finally(f => {
        this.$nextTick(() => {
          this.scrollToTop();
        })
      });
    },
    // 取消按钮
    cancel() {
      const obj = { path: "/system/position/positionAdd", name: "PositionAdd" };
      this.$tab.closePage(obj);
      setTimeout(()=> {
        this.$router.push({path:'/system/position/index',query: {id: this.form.clientId}})
      }, 300);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePosition(this.form).then(response => {
              this.$modal.msgSuccess("success");
              const obj = { path: "/system/position/index", name: "positionIndex" };
              this.$tab.closePage(obj);
              setTimeout(()=> {
                this.$router.push({path:'/system/position/index',query: {id: this.form.clientId}})
              }, 300);
            });
          } else {
            addPosition(this.form).then(response => {
              this.$modal.msgSuccess("success");
              const obj = { path: "/system/position/index", name: "positionIndex" };
              this.$tab.closePage(obj);
              setTimeout(()=> {
                this.$router.push({path:'/system/position/index',query: {id: this.form.clientId}})
              }, 300);
            });
          }
        }
      });
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .p_form .el-form-item__label {
    line-height: 0px;
  }
  .card3 {
    background-image: linear-gradient(to right, #000 35%, rgba(255,255,255,0) 0%); /* 35%设置虚线点x轴上的长度 */
    background-position: bottom; /* top配置上边框位置的虚线 */
    background-size: 10px 1px; /* 第一个参数设置虚线点的间距；第二个参数设置虚线点y轴上的长度 */
    background-repeat: repeat-x;
  }
</style>
